<template>
<div id="cesiumContainer"></div>
</template>


<script setup>
import { onMounted } from 'vue'
import { emit, CESIUM_VIEWER_INITIALIZATION } from '../../utils/EventBus.js'
import * as Cesium from 'cesium'
import { changeOperation, restrictCamera } from './utils/camera.js'
import 'cesium/Build/Cesium/Widgets/widgets.css'

window.CESIUM_BASE_URL = '/Cesium/'
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MmE1MDRmNi1hMjA3LTRlNjUtYTU0OC02ZjY5NmY0MGE2MjYiLCJpZCI6NTY4NjUsImlhdCI6MTYyMTg1NzA2Nn0.RMiMaEoQ_319er2NlFBEH00xC5BzD9OeunYmAjdu2SY'


const { options } = defineProps({
  options: {
    type: Object,
    default: () => ({}),
  },
})

onMounted(() => {
  window.cesiumViewer = createCesiumViewer('cesiumContainer', options)
  emit(CESIUM_VIEWER_INITIALIZATION, cesiumViewer)
})


const createCesiumViewer = (container, options = {}) => {
  const defaultOptions = {
    animation: false, // 隐藏时间轴控件
    baseLayerPicker: false, // 隐藏图层选择控件
    fullscreenButton: false, // If set to false, the FullscreenButton widget will not be created.
    geocoder: false, // 隐藏地理编码器控件
    homeButton: false, // 隐藏Home按钮
    infoBox: false, // 隐藏点击要素信息控件
    sceneModePicker: false, // 隐藏场景模式选择控件
    selectionIndicator: false, // 隐藏选取指示器控件
    timeline: false, // 隐藏时间线控件
    navigationHelpButton: false, // 隐藏帮助按钮
    baseLayer: false,
    // terrain: Cesium.Terrain.fromWorldTerrain(),

    /**离线 start */
    // baseLayer: Cesium.ImageryLayer.fromProviderAsync(
    //   Cesium.TileMapServiceImageryProvider.fromUrl(
    //     Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
    //   )
    // )
    /**离线 end */
  }

  const viewer = new Cesium.Viewer(container, { ...defaultOptions, ...options })
  changeOperation(viewer)
  restrictCamera(viewer)

  // 显示帧率
  if (import.meta.env.MODE === 'development') {
    // 开发环境下执行的代码
    viewer.scene.debugShowFramesPerSecond = true
  }
  return viewer
}

</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  background-color: transparent;

  /* 隐藏底部DOM标签 */
  .cesium-viewer-bottom {
    visibility: hidden;
  }

  /* 帧数显示 */
  .cesium-performanceDisplay-defaultContainer {
    top: 60px;
    right: 800px;


    .cesium-performanceDisplay {
      font-size: 20px;
    }
  }
}
</style>
